<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>主页</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link th:href="@{../assets/css/page.css}" rel="stylesheet" />
<link th:href="@{../assets/css/NGR.css}" rel="stylesheet" />
<link th:href="@{../assets/css/platformDemo.css}" rel="stylesheet" />

<!--[if lt IE 9]>
	<script th:src="@{../assets/js/html5shiv.js}"></script>
	<script th:src="@{../assets/js/respond.min.js}"></script>
<![endif]-->
<!-- <style>
.inside-header {
	    background:url(../assets/img/home/home.png);
	    width:100%;
	    height: 100%;
	    background-repeat : no-repeat;
	    background-color: #DAE8F5;
	}


</style>
 -->
</head>
<body class="inside-header inside-aside ">
<div id="main" role="main" >

<div class="widget-body no-padding">



<div id="map" style="width: 100%; height: 100%; margin: 0; padding: 0; position:absolute;background-color: #DAE8F5">


</div>



</div></div>
<script type="text/javascript" th:src="@{../assets/libs/jquery/dist/jquery.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap/dist/js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/toastr/toastr.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/extensions/export/bootstrap-table-export.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/layer/src/layer.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/page.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/NGR.min.js}"></script>
<script type="text/javascript">
var markersLayer;
var value=-1;
(function () {
window.map = new NGR.View('map', {
        //通过开发者平台获取AppKey
        AppKey: "f83a1f3ce8374d7fbda8931f71933fde" 
    });
window.res = new NGR.DataSource({
        //通过开发者平台获取AppKey
        AppKey: "f83a1f3ce8374d7fbda8931f71933fde" 
    });
window.layers = {};
 window.marker={};
  var mapId = 2033;
 // window.geomLayers = {};
  var control = NGR.control.floor();
	 markersLayer = NGR.layerGroup();
  var onerror = function (e) {
    console.error(e, e.stack);
  };

// 请求楼层数据
  var loadPlanarGraph = function (planarGraphId) {
    res.requestPlanarGraph(planarGraphId).then(function (layerInfo) {
    //  console.log(layerInfo);
      NGR.IO.fetch({
        url: '../assets/fonts/style.template.json',
        onsuccess: JSON.parse
      }).then(function (style) {
		map.clear();
		 layers.frame = NGR.featureLayer(layerInfo, {
            layerType: 'Frame',
            styleConfig: style
        });
         map.addLayer(layers.frame); // 将楼层框架图层添加到地图中去
        // 准备商铺图层
        layers.area = NGR.featureLayer(layerInfo, {
            layerType: 'Area',
            styleConfig: style
        });
        map.addLayer(layers.area); // 将商铺图层添加到地图中去

        // 准备商铺文字和图标图层
        layers.annotation = NGR.featureLayer(layerInfo.Area, {
            layerType: 'LogoLabel',
            styleConfig: style
        });
        // 准备公共设施图标图层
        layers.facility = NGR.featureLayer(layerInfo.Facility, {
            layerType: 'Facility',
            styleConfig: style
        });
        // 准备碰撞检测图层组
        layers.collision = NGR.layerGroup.collision({
            margin: 3
        });
        layers.collision.addLayer(layers.annotation); // 将商铺文字和图标图层添加到碰撞检测图层组中去
        layers.collision.addLayer(layers.facility); // 将公共设施图标图层添加到碰撞检测图层组中去
        map.addLayer(layers.collision); // 将碰撞检测图层组添加到地图中去
  		map.addLayer(markersLayer);
        map.render();   // 所有图层都添加到地图后，渲染地图 
      }).fail(onerror);
    }).fail(onerror);
  };
    var insertLine = function (parent ,innerHTML, className) {
        var line = NGR.DomUtil.create('p', className, parent);
        var item = NGR.DomUtil.create('a', 'item ' + className, line);
         item.innerHTML = innerHTML;

    };
// 初始化显示UI显示文字
    var info = NGR.DomUtil.create('div', 'platform-demo-info', document.body);
    insertLine(info, '救 援 疏 散 调 度 图', 'screen');





// 请求地图数据
  res.requestMap(mapId).then(function (mapInfo) {
    res.requestPOIChildren(mapInfo.poi).then(function(floors) {
      // 初始化楼层控件
      map.addControl(control);
      control.on('change', function (e) {
		markersLayer.clearLayers();
		fireAjax(e.to);
        control.setCurrentFloor(e.to, loadPlanarGraph);
      });
      control.setFloorList(floors);
 		fireAjax(floors[4].id);
      control.setCurrentFloor(floors[4].id, loadPlanarGraph);
		
    }).fail(onerror);
  }).fail(onerror);

}).call(this);

function getValue(obj){    
     value = obj.value;  
   
} 


function fireAjax(ifloor){
	$.ajax({
                url:"../firecontrolfacilities/findItems",
                type:"post",
                dataType:"json",
                 async: false ,
                data:{
                "ifloor":ifloor
                },
                success:function (data) {
               		pub(data);
                },
                error:function(error) {
					
                }
            })


}

		function pub(data){
				//<![CDATA[
               		for(var i=0;i<data.length;i++){
               		if(data[i].istatus==0){
               			 var tempmarker =NGR.marker([data[i].clat,data[i].clng],{
					    	icon: NGR.icon({
					      iconUrl: '../assets/img/fire.png',
					      iconSize: [25, 25]
					    })
					  });
					}else{
					 var tempmarker =NGR.marker([data[i].clat,data[i].clng],{
					    	icon: NGR.icon({
					      iconUrl: '../assets/img/firered.png',
					      iconSize: [25, 25]
					    })
					  });
					
					}
					marker[tempmarker._ngr_id]=tempmarker;
					marker[tempmarker._ngr_id].obj=data[i];
					marker[tempmarker._ngr_id].on("click",function(e){
					var id=e.target._ngr_id;
					var popup = NGR.popup({
						closeButton:true,
						height:550
					})
					    .setLatLng(e.latlng)
					    .setContent('<div>设施名称：<input style="width:150px;" id="cname'+id+'" /><br />是否可用：<input name="useable'+id+'" id="use'+id+'"  type="radio" value="0" onclick="getValue(this)" />可用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input  name="useable'+id+'" type="radio" value="1" id="nouse'+id+'" onclick="getValue(this) " />不可用<br />使用说明：<input type="text" id="cremark'+id+'" style="width:150px"/><br /><input id="save'+id+'" type="button" value="保存"/><input type="button" value="取消"/></div>')
					    .openOn(map);
					    $("#cname"+id).val(this.obj.cname);
					    $("#cremark"+id).val(this.obj.cremark);
					    value=this.obj.istatus;
					    if(this.obj.istatus==0){
					     $("#use"+id).attr("checked",true);  
					    }else{
					     $("#nouse"+id).attr("checked",true); 
					    }
					    var iid=this.obj.iid;
					    document.getElementById("save"+id).onclick=function(){
								var cname=$("#cname"+id).val();
								var cremark=$("#cremark"+id).val();
								var url="../firecontrolfacilities/editNoLatLng";
								  $.ajax({
						                url:url,
						                type:"post",
						                dataType:"json",
						                data:{
						                "iid":iid,
						                "cname":cname,
						                "cremark":cremark,
						                "istatus":value
						                },
						                success:function (data) {
						                // map.closePopup(popup);
						                  	alert(data.retmsg);
						                    window.location.reload();
						                },
						                error:function (error) {
						                }
						            })
							}
					})
               		markersLayer.addLayer(marker[tempmarker._ngr_id]);
               		}
               		//]]> 
}
</script>
</body></html>

